/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import { View, ImageBackground } from 'react-native';

// project
import {
    TouchOpacity, Image, Text, Hand, ItemY, Between
} from '../../../library';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Make extends Component {

	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			showBool: this.props.showBool
		}
    }
    
    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    /**
     * 加号点击效果
     */
    addElement = () => {
        if(this.props.activeBool){
            this.setState({showBool:!this.state.showBool})
        }
    }

	/**
	 * 渲染
	 */
	render() {
        
        // 接收方法
        const IonPress = this.props.IonPress ? this.props.IonPress : {};
        const TonPress = this.props.TonPress ? this.props.TonPress : {};
        const VonPress = this.props.VonPress ? this.props.VonPress : {};


		// 渲染
		return (
			<View style={{alignItems:'center',margin:10}}>
                <Hand x='center' y='center'>
                    <TouchOpacity active='0.7' w='30' h='30' onPress={this.addElement}>
                        <Image source={require('../../../assets/u391.png')} w='27' h='27' />
                    </TouchOpacity>
                </Hand>

                { this.state.showBool ? (
                    //  显示 弹出控件 
                    <View style={{position:'absolute',zIndex:3,bottom:35}}>
                        <ImageBackground source={require('../../../assets/u395.jpg')} style={{width:184,height:66}}>
                            <Between px='13'>
                                <TouchOpacity active='0.7' f='1' onPress={()=>{IonPress}}>
                                    <ItemY f='1' x='center' y='center'>
                                        <Image source={require('../../../assets/u2565.png')} w='23' h='23' mb='2' />
                                        <Text size='12'>图片</Text>
                                    </ItemY>
                                </TouchOpacity>
                                <TouchOpacity active='0.7' f='1' onPress={()=>{TonPress}}>
                                    <ItemY f='1' x='center' y='center'>
                                        <Image source={require('../../../assets/u2567.png')} w='23' h='23' mb='2' />
                                        <Text size='12'>文字</Text>
                                    </ItemY>
                                </TouchOpacity>
                                <TouchOpacity active='0.7' f='1' onPress={()=>{VonPress}}>
                                    <ItemY f='1' x='center' y='center'>
                                        <Image source={require('../../../assets/u2563.png')} w='21' h='21' mb='2' />
                                        <Text size='12'>视频</Text>
                                    </ItemY>
                                </TouchOpacity>
                            </Between>
                        </ImageBackground>
                    </View>
                 ) : (
                    //  不显示 弹出控件 
                    null) }
                
			</View>
		);
	}
};


/**
 * 组件使用示例
 * 控件  默认不显示  默认不可点击
 * activeBool   没有此属性或值为false  则加号不能被点击      为true    则加号可点击
 * showBool     没有此属性或值为false  则弹出控件默认不显示  值为true   则控件默认为显示
 */
// 制作首页 引入模块
{/* <Make showBool={true}></Make> */}
// 制作页 引入模块
{/* <Make activeBool={true}></Make> */}